<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
		
		<view class="additem-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true" :show-default-loading-more-text="false"	>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<template #top>
					<view class="" >
						<fui-nav-bar title="添加商品" isFixed isOccupy background="#fff" @leftClick="pageBack"></fui-nav-bar>
						<view class="u-p-l-35 u-p-r-35 u-p-t-20 ">
							<fui-search-bar searchText v-model="searchValue" placeholder="商品名称" :cancel="false"  background="#fff" inputBackground="#f0f0f0" @input="reloadFn" paddingTb="0" paddingLr="0" radius="45"></fui-search-bar>
							<view class="u-m-t-20 u-p-16 u-flex " style="background-color: #f8f8f8;color:#999;align-items: flex-start;">
								<text class="iconfont icon-zhuyi u-m-r-14 u-m-t-4 u-font-28" color="#333"></text>
								<view class="u-font-28">
									当前采购商【{{ownerName}}】，选中商品
									将签约至此采购商
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<view class="history-container u-p-l-35 u-p-r-35">
					<u-checkbox-group style="width:100%"  :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
						<u-checkbox 
							:noneClass="isCheckShow"
							:labelClass="true"
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in dataList" :key="item.itemId" 
							:name="index"
							style="width: 100%; background-color: #fff;border-bottom: 1px solid #eaeaea;"
						>
								<view class="history-item u-flex u-p-t-30 u-p-b-30" >
									<image :src="item.url" class="u-m-l-14" mode="" style="display:block;width: 100rpx;height: 100rpx;margin-right: 20rpx;border-radius: 10rpx;"></image>
									<view class="" style="flex: 1;overflow: hidden;">
										<view class="u-font-30 u-line-1" style="font-weight: 500;">{{item.itemName}}</view>
										<view class="u-font-24 u-m-t-10" v-if="item.specification" style=" display: inline-block; color: #999;background-color: #f8f8f8;padding: 10rpx 12rpx;border-radius: 10rpx;">
											{{item.specification}}
										</view>
									</view>
									<view class="" style="width: 200rpx;">
										<view class="u-text-right u-line-1" style="color:#999 ;" v-if="item.isInheritFromBrandOwner">
											{{item.brandOwnerName}}
										</view>
										<view class="u-text-right" >
											<view class=" u-font-32" style="color: #ff551a;" v-if="!item.checked">
												<text v-if="item.price">￥{{item.price}}</text>
												<text v-else style="color: #999;">未配置</text>
											</view>
											<view  v-else>
												<view class="u-font-32" style="color: #ff551a;" v-if="item.isInheritFromBrandOwner">
													<!-- ￥{{item.price}} -->
													<text v-if="item.price">￥{{item.price}}</text>
													<text v-else style="color: #999;">未配置</text>
												</view>
												<view class="u-flex u-row-right" style="color: #333;" v-if="!item.isInheritFromBrandOwner">
													￥<input type="number" v-model="item.price" name="" id="" style="border: 1px solid #999;border-radius: 10rpx; text-align: center;width: 150rpx;height: 50rpx;">
												</view>
											</view>
											
										</view>
									</view>
								</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<template #bottom>
					<view  style="border-top: 1px solid #eaeaea;">
						<view v-if="!isCheckShow">
							<!-- bottom的内容 -->
							<view class="history-bottom u-p-r-35 u-p-l-35 u-flex u-col-center u-row-between">
								<u-checkbox class="u-flex" :icon-size="20" :size="40" :name="'全选'" v-model="allSelect" shape="circle" label-size="24rpx" :active-color="themeColor" @change="checkedAll">
									<text style="font-weight: bolder;">全选</text>
									<text style="font-weight: bolder;"  class="u-m-l-20">已选  {{chooseList.length}}  个品</text>
								</u-checkbox>
								<button type="default" class="history-del_btn" @click="delHistoryFn">添加</button>
							</view>
						</view>
					</view>
				</template>
			
			</z-paging>
			
		</view>
	
</template>

<script>
	
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				isCheckShow:false,
				allSelect:false,
				ownerName:'',
				salesAgreementId:'',
				searchValue:'',
			}
		},
		onLoad(options) {
			this.ownerName = options.ownerName;
			// this.shopId = options.shopId;
			this.salesAgreementId = options.salesAgreementId;
		},
		computed:{
			chooseList(){
				let ary = [];
				this.dataList.forEach(item=>{
					if(item.checked){
						ary.push({
							itemId:item.itemId,
							price:item.price
						})
					};
				})
				return ary;
			}
		},
		methods: {
			reloadFn(){
				this.$refs.paging.reload();
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.dataList[e.name].checked = e.value;
				this.allSelect = this.dataList.every(item=>{return item.checked === true});
			},
			// 点击管理按钮开始编辑
			editBeginFn(){
				this.isCheckShow = false;
			},
			// 结束编辑
			editEndFn(){
				this.isCheckShow = true;
				this.allSelect = false;
				this.checkedAll({value:this.allSelect});
			},
			// 全选
			checkedAll(e) {
				this.dataList.map(val => {
					val.checked = e.value;
				});
			},
			async delHistoryFn(){
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				if(this.chooseList.length == 0){
					uni.hideLoading({});
					this.$u.toast('至少选择一个商品');
					return false;
				}
				let pricePass = this.chooseList.every(item=>{
					return item.price!==''&&item.price!=null;
				})
				if(!pricePass){
					uni.hideLoading({});
					this.$u.toast('选择商品项中价格不得有空值');
					return false;
				}
				let params  = {
					items:this.chooseList,
					salesAgreementId:this.salesAgreementId
				}
				const res = await this.$newHttp.put('api/Shop/v2/UpdateSalesAgreementByManual',params);
				uni.hideLoading({});
				if(res.code == 200){
					this.$refs.paging.reload();
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 上一页
					beforePage._data.refreshIfNeeded = true;
					uni.$emit('sendContract')
					uni.navigateBack({
						delta: 1
					})
				}else{
					this.$u.toast('添加商品失败，错误信息：'+res.erroMessage);
				}
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					IsPaging:true,
					salesAgreementId:this.salesAgreementId
				}
					
				if(this.searchValue != ''){
					params.itemName = this.searchValue
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Shop/v2/FindItemsThatCanBeAddedToSalesAgreement', { params: params } );
				uni.hideLoading()
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						return item
					});
					this.$refs.paging.complete(ary);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.additem-content {
		height: 100%;
		background-color: #fff;
	}
	.history-container{
		box-sizing: border-box;
		.history-item{
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
		}
		
	}
	.history-bottom{
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		.history-del_btn{
			width: 200rpx;
			height: 80rpx;
			background: #ffbb1a;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			margin: 0;
		}
	}
	
</style>
